<template>
  <div class="database-panel">
    <div class="panel-header">
      <select class="table-dropdown" v-model="selectedTable" @change="selectTable">
        <option value="">选择表</option>
        <option v-for="table in tables" :key="table.name" :value="table.name">
          {{ table.name }}
        </option>
      </select>
    </div>

    <div class="panel-content">
      <!-- 目标表字段选项卡 -->
      <div class="dataset-tab" :class="{ 'expanded': showAllColumns }">
        <DatasetCard
          :stepIndex="0"
          name="目标表字段"
          description="当前选中表的字段信息"
          icon="fas fa-table"
          :columns="currentTableFields"
          :isActive="true"
          :showAllColumns="showAllColumns"
          @toggle-columns="toggleColumns"
        />
      </div>
    </div>
  </div>
</template>

<script>
import DatasetCard from './DatasetCard.vue';

export default {
  components: {
    DatasetCard,
  },
  data() {
    return {
      tables: [
        { name: '客户信息表', fields: [] },
        { name: '订单表', fields: [] },
        { name: '产品表', fields: [] },
      ],
      selectedTable: null,
      currentTableFields: [],
      showAllColumns: false,
    };
  },
  props: {
    currentStepFields: {
      type: Array,
      default: () => []
    }
  },
  watch: {
    // 添加currentStepFields的监听器
    currentStepFields: {
      handler(newFields) {
        // 当currentStepFields变化时，如果已选择表则重新更新字段
        if (this.selectedTable) {
          this.updateCurrentTableFields(this.selectedTable);
        }
      },
      deep: true // 深度监听数组变化
    }
  },
  methods: {
    selectTable() {
      this.updateCurrentTableFields(this.selectedTable);
      this.$emit('table-selected', this.selectedTable);
    },
    updateCurrentTableFields(tableName) {
      const mockData = require('@/views/db/mockData.js');
      const tableFields = mockData.dbTables[tableName];
      if (tableFields) {
        // 确保每次调用都进行字段比对
        this.currentTableFields = this.compareColumns(tableFields, this.currentStepFields);
      } else {
        console.error(`未找到表 ${tableName} 的字段定义`);
      }
    },
    // 添加字段比对函数
    compareColumns(targetColumns, currentColumns) {
      return targetColumns.map(col => {
        const matched = currentColumns.some(c => 
          c.name === col.name && 
          c.type === col.type &&
          c.required === col.required
        );
        return matched ? { ...col, status: 'matched' } : col;
      });
    },
    toggleColumns() {
      this.showAllColumns = !this.showAllColumns;
    },
  },
};
</script>

<style scoped>
.panel-header {
  padding: 20px; /* 统一 padding */
  font-size: 1.4rem; /* 统一 font-size */
  font-weight: 600;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--header-bg);
}

.panel-header i {
  color: var(--panel-color); /* 统一 icon 颜色 */
}

.panel-content {
  flex: 1;
  display: flex;
  overflow: hidden;
}

.tables-list {
  width: 100%;
  border-right: none;
  overflow-y: auto;
  padding: 10px 0;
}

.table-dropdown {
  width: 100%;
  padding: 8px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  margin-top: 5px;
  background: white;
  cursor: pointer;
}

.table-details {
  flex: 1;
  overflow: auto;
  display: flex;
  flex-direction: column;
}

.details-header {
  padding: 15px 20px;
  font-size: 1.2rem;
  font-weight: 600;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  gap: 12px;
}

.details-header i {
  color: var(--relation-color);
}

.fields-comparison {
  flex: 1;
  overflow: auto;
  padding: 20px;
}

.comparison-table {
  width: 100%;
  border-collapse: collapse;
}

.comparison-table th,
.comparison-table td {
  padding: 12px 15px;
  text-align: left;
  border-bottom: 1px solid var(--border-color);
}

.comparison-table th {
  background: var(--table-header-bg);
  font-weight: 600;
}

.status-badge {
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 0.85rem;
  font-weight: 500;
}

.status-badge.match {
  background: var(--added-color);
  color: #2e7d32;
}

.status-badge.modified {
  background: var(--modified-color);
  color: #e65100;
}

.status-badge.converted {
  background: var(--split-color);
  color: #01579b;
}

.status-badge.missing {
  background: var(--missing-color);
  color: #757575;
}

/* 数据集选项卡样式 */
.dataset-tab {
  width: 100%;
  background: var(--card-bg);
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
  border: 1px solid var(--border-color);
  margin-top: 20px;
  flex-shrink: 0;
  transition: width 0.3s ease; /* 添加过渡效果 */
  height: 100%; /* 设置高度为100% */
}

.dataset-tab.expanded {
  width: 100%; /* 当显示所有列时，宽度变宽 */
}

@media (max-width: 768px) {
  .panel-content {
    flex-direction: column;
  }

  .tables-list {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--border-color);
  }
}
</style>
